//正式考试管理

import React, { useEffect, useState } from 'react';
import { Layout, Typography, Card, Button, Table, Space, Modal, Form, Input, DatePicker, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getExamInforAPI,addExamInforAPI,deleteExamInforAPI } from '@/api/admin/exam';

const { Content } = Layout;
const { confirm } = Modal;

const Exam1 = () => {
  const [form] = Form.useForm();
  const [modalVisible, setModalVisible] = useState(false);

//获取考试信息
  useEffect(()=>{
    async function getexamInfor(){
      const res =await getExamInforAPI()
      if(res !== '')
        setData(res.data)
    }
    getexamInfor()
  },[])


  const [data, setData] = useState([
    // {
    //   examinationId: '1',
    //   examinationDate: '2024-05-20',
    //   examinationName: '科目一',
    //   examinationlocation: '考试地点A',
    // },
    // // 可以添加更多的模拟数据
  ]);

  // 表格列配置
  const columns = [
    {
      title: '考试日期',
      dataIndex: 'examinationDate',
      key: 'examinationDate',
    },
    {
      title: '考试科目',
      dataIndex: 'examinationName',
      key: 'examinationName',
    },
    {
      title: '考试地点',
      dataIndex: 'examinationLocation',
      key: 'examinationLocation',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="danger" onClick={() => showDeleteConfirm(record)}>删除</Button>
        </Space>
      ),
    },
  ];

  // 处理新增按钮点击事件
  const handleAdd = () => {
    form.resetFields();
    setModalVisible(true);
  };

  // 处理删除按钮点击事件
  const showDeleteConfirm = (record) => {
    confirm({
      title: '确认删除该考试信息吗？',
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        handleDelete(record);
      },
    });
  };

  // 处理删除操作
  const handleDelete = async(record) => {
    const updatedData = data.filter(item => item.examinationId !== record.examinationId);
    setData(updatedData);
    await deleteExamInforAPI(record.examinationId)
    message.success('删除成功');
  };

  // 处理模态框确认事件
  const handleModalOk = () => {
    form.validateFields()
    .then(values => {
      const newData = {
        ...values,
        examinationId: (data.length + 1).toString(),
        examinationDate: values.examinationDate.format('YYYY-MM-DD'), // 添加日期字段并格式化
      };
      setData([...data, newData]);
      addExamInforAPI({
        ...values,
        examinationDate: values.examinationDate.format('YYYY-MM-DD')
      })
      message.success('新增成功');
      setModalVisible(false);
    })
    .catch(error => {
      console.error('表单验证失败:', error);
    });
  };

  // 处理模态框取消事件
  const handleModalCancel = () => {
    setModalVisible(false);
  };

  return (
    <Layout>
      <Content style={{ padding: '0 50px', marginTop: 24 }}>
        <div className="site-layout-content">
          <Typography.Title level={2} style={{ textAlign: 'center', marginBottom: 24 }}>
            正式考试管理
          </Typography.Title>
          <Card>
            <Button type="primary" onClick={handleAdd} icon={<PlusOutlined />}>
              新增考试
            </Button>
            <Table columns={columns} dataSource={data} style={{ marginTop: 16 }} />
          </Card>
          <Modal
            title="新增考试信息"
            visible={modalVisible}
            onOk={handleModalOk}
            onCancel={handleModalCancel}
          >
            <Form form={form} layout="vertical">
              <Form.Item label="考试日期" name="examinationDate" rules={[{ required: true, message: '请选择考试日期' }]}>
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item label="考试科目" name="examinationName" rules={[{ required: true, message: '请输入考试科目' }]}>
                <Input />
              </Form.Item>
              <Form.Item label="考试地点" name="examinationLocation" rules={[{ required: true, message: '请输入考试地点' }]}>
                <Input />
              </Form.Item>
            </Form>
          </Modal>
        </div>
      </Content>
    </Layout>
  );
};

export default Exam1;